<template>
  <HomePanel ref="target" title="热门品牌" subTitle="国际经典 品质保证">
    <template #right>
      <a
        href="javascript:;"
        @click="toggle(0)"
        class="iconfont icon-angle-left"
        :class="{ brand: toggleStyle === 0 }"
      ></a>
      <a
        @click="toggle(1)"
        href="javascript:;"
        class="iconfont icon-angle-right"
        :class="{ brand: toggleStyle === 1 }"
      ></a>
    </template>
    <div class="brand-box">
      <ul :style="{ transform: toggleStyle === 0 ? 'translateX(0)' : 'translateX(-1240px)' }">
        <li v-for="item in list" :key="item.id">
          <RouterLink to="/">
            <img :src="item.logo" alt="" />
          </RouterLink>
        </li>
      </ul>
    </div>
  </HomePanel>
</template>

<script>
import HomePanel from './home-panel.vue'
import { useLazyData } from '@/utils/hoods.js'
import { getBrand } from '@/api/home.js'
import { ref } from 'vue'
export default {
  name: 'HomeBrand',
  components: {
    HomePanel
  },
  setup() {
    // 右上角光标切换
    const toggleStyle = ref(0)
    const toggle = num => {
      toggleStyle.value = num
    }
    // 数据懒加载
    const { target, list } = useLazyData(getBrand)
    return {
      target,
      list,
      toggleStyle,
      toggle
    }
  }
}
</script>

<style lang="less" scoped>
.home-panel {
  background-color: #f5f5f5;
  .iconfont {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    margin-left: 5px;
    background: var(--xtx-color);
    color: #fff;
    &.brand {
      background: #ccc;
      cursor: not-allowed; // 光标禁用
    }
  }
  .brand-box {
    width: 100%;
    height: 345px;
    overflow: hidden;
    padding-bottom: 40px;
    ul {
      width: 200%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      transition: all 1s;
      li {
        transition: all 0.5s;
        &:hover {
          transform: translate3d(0, -3px, 0px);
          box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
        }
      }
      img {
        width: 240px;
        height: 100%;
      }
    }
  }
}
</style>
